<template>
  <div class="container-fluid" >
    <div class="row" >
      <div class="col" >
        <breadcrumb v-bind:paths="paths" v-bind:name="name" ></breadcrumb>
      </div>
    </div>
    <div class="row msg">
      <div class="col" >
            <el-button-group>
      <el-button type="primary" @click="showdialo()" icon="el-icon-edit">添加代理商</el-button>
    </el-button-group>
      </div>
    </div>
  <div class="row msg" >
    <div class="col" >
          <el-table class="text-center"  :data="tableData" border :height="500" style="width: 100%">
      <el-table-column fixed prop="userId" sortable label="用户ID" width="150">
      </el-table-column>
      <el-table-column prop="userName" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="userType" sortable label="用户类型" width="120">
      </el-table-column>
      <el-table-column prop="phoneNum" sortable label="手机号码" width="120">
      </el-table-column>
      <el-table-column prop="userEmail" label="邮箱" width="120">
      </el-table-column>
      <el-table-column  prop="medal" sortable label="奖章" width="150">
      </el-table-column>
      <el-table-column prop="totalSpend" sortable label="消费金额" width="120">
      </el-table-column>
      <el-table-column prop="lastLoginTime" sortable label="最近登陆" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px" v-text="getLocalTime(scope.row.lastLoginTime)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="agent" label="agent" width="120">
      </el-table-column>
      <el-table-column prop="level" label="level" width="120">
      </el-table-column>
      <el-table-column prop="packege_ID" label="邮编" width="120">
      </el-table-column>
      <el-table-column prop="area" label="区号" width="120">
      </el-table-column>
      <el-table-column fixed="right"  label="操作" width="180">
        <template slot-scope="scope">
          <router-link :to="{ name:'watchuser', params: { userId: scope.row.userId } }" class=" btn btn-sm btn-info" size="small">查看</router-link>
          &nbsp;
          <el-button @click="updateuser(scope.$index)" type="warning" class="el-icon-edit-outline" size="small"></el-button>
          <el-button type="danger" @click="deldata({uid:scope.row.userId})" icon="el-icon-delete" title="删除" size="small"></el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>

    <el-dialog title="添加供应商" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="供应商名称" :label-width="formLabelWidth">
          <el-input v-model="form.userName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择地区" :label-width="formLabelWidth">
          <el-select v-model="form.area" auto-complete="off">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商手机" :label-width="formLabelWidth">
          <el-input v-model="form.phoneNum" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.userEmail" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
        <el-dialog title="修改用户" :visible.sync="dialogUser">
      <el-form v-if="form1" :model="form1">
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="form1.userName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="form1.password" auto-complete="off"></el-input>
        </el-form-item>
                <el-form-item label="用户类型" :label-width="formLabelWidth">
          <el-select v-model="form1.userType" auto-complete="off">
            <el-option v-for="item in userTypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择地区" :label-width="formLabelWidth">
          <el-select v-model="form1.area" auto-complete="off">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用户手机" :label-width="formLabelWidth">
          <el-input v-model="form1.phoneNum" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input v-model="form1.userEmail" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUser= false">取 消</el-button>
        <el-button type="primary" @click="onSubmit1">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {
  allUser,
  asyncgetAllPackege,
  asyncnewAgent,
  asyncdeleteUserByID,
  asyncupdateUser
} from "../../plugins/api.js";
import { getLocalTime } from "../../plugins/utils.js";
import breadcrumb from "@/components/breadcrumb.vue";
export default {
  data() {
    return {
      paths: [],
      name: "查看用户",
      dialogFormVisible: false,
      dialogUser: false,
      formLabelWidth: "120px",
      tableData: [
        {
          userId: "2016-05-03",
          info: "",
          password: "",
          userType: "",
          userName: "",
          userEmail: "",
          phoneNum: "",
          level: "",
          experience: "",
          headImg: "",
          medal: "",
          totalSpend: "",
          lastLoginTime: "",
          agent: "",
          packege_ID: "",
          area: ""
        }
      ],
      options: [
        {
          value: "0086",
          label: "中国 0086"
        },
        {
          value: "+886",
          label: "中国台湾 00886"
        }
      ],
      userTypes: [
        {
          value: "Tourist",
          label: "游客"
        },
        {
          value: "User",
          label: "用户"
        },
        {
          value: "Agent",
          label: "代理商"
        },
        {
          value: "Admin",
          label: "管理员"
        }
      ],
      form: {
        password: "",
        userType: "Agent",
        userName: "",
        userEmail: "",
        phoneNum: "",
        area: "0086"
      },
      form1: null,
      packages: []
    };
  },
  async mounted() {
    this.start();
  },
  methods: {
    showdialo() {
      this.dialogFormVisible = true;
    },
    async start() {
      this.tableData = await allUser();
      this.packages = await asyncgetAllPackege();
      console.log(this.packages);
    },
    getLocalTime(time) {
      return getLocalTime(time);
    },
    async onSubmit() {
      try {
        await asyncnewAgent(this.form);
        this.start();
        this.$message({
          message: "恭喜你，添加成功",
          type: "success"
        });
        this.dialogFormVisible = false;
      } catch (err) {
        this.$message.error("错了哦，添加失败:" + err);
      }
    },
    handleClick(row) {
      console.log(row);
    },
    addpackage() {
      this.form.packege_ID.push("");
      this.form.packege_count.push(1);
    },
    delpackage(i) {
      this.form.packege_ID.splice(i, 1);
      this.form.packege_count.splice(i, 1);
    },
    async deldata(i) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            await asyncdeleteUserByID(i);
            this.start();
            this.$message({
              message: "恭喜你，删除成功",
              type: "success"
            });
          } catch (err) {
            this.$message.error("错了哦，删除失败:" + err);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async updateuser(i) {
      this.form1 = this.tableData[i];
      this.dialogUser = true;
    },
    async onSubmit1() {
      try {
        await asyncupdateUser(this.form1);
        this.start();
        this.$message({
          message: "恭喜你，修改成功",
          type: "success"
        });
        this.dialogUser = false;
      } catch (err) {
        this.$message.error("错了哦，修改失败:" + err);
      }
    }
  },
  components: {
    breadcrumb
  }
};
</script>

<style scoped>
</style>